<template>
	<view class="pannel mt-20 fs-24" v-if="info" @tap="toDetil">
		<view style="padding-left: 30rpx;">
			<view style="padding-right: 30rpx;">
				<avater :userInfo="info.userInfo" :avaterSize="80">
					<!-- <template #right>
						<view>
							<view v-if="showDel" class="" @tap.stop="onDelete">
								<image src="../../static/friend/delete.png" style="width:32rpx;height:32rpx;"></image>
							</view>
							<view v-else-if="showMore">
								<view @tap.stop="showMoreTask" class="flex flex-x-y fs-24 color-999999"
									style="transform: translateY(-20rpx);">
									<view>屏蔽</view>
									<view class="iconfont icon-cuo fs-30"></view>
								</view>
							</view>
						</view>
					</template> -->
					<template #right>
						<view>
							<view v-if="showDel" class="" @tap.stop="onDelete">
								<image src="../../static/friend/delete.png" style="width:32rpx;height:32rpx;"></image>
							</view>
						</view>
					</template>
				</avater>
			</view>
			<view class="content mt-20">
				<view class="text fs-28"
					style="color:#333333;white-space: pre-line;word-break: break-word;padding-right: 30rpx;">
					{{ info.text }}
				</view>

				<!-- <view class="imagebox flex mt-20" v-if="info.images">
					<view class="image-box mr-10" style="margin-bottom: 10rpx;" :class="{ 'mr-0': ismargin(i) }"
						v-for="(item, i) in info.images" :key="i" @tap.stop="choose_image(i)">
						<image mode="aspectFill" :src="item"></image>
						<view v-if="item.endsWith('.mp4')" style="width: 224rpx;height: 224rpx;">
							<video ref="videoPlayer" id="videoPlayer" style="width: 100%; height: 100%;" :src="item" controls/>
						</view>
						<image v-else mode="aspectFill" :src="item"></image>
					</view>
				</view> -->


				<view class="imagebox flex mt-20" v-if="info.images">
					<view class="image-box mr-10" style="margin-bottom: 10rpx;" :class="{ 'mr-0': ismargin(i) }"
						v-for="(item, i) in info.images" :key="i">
						<view v-if="item.endsWith('.mp4')" @tap.stop="preview_video(item)" class="video-box">
							<image :src="item+'?x-oss-process=video/snapshot,t_0,f_jpg'" style="width:100%;height:100%;pointer-events: none;"
								mode="aspectFill"></image>
							<view class="play-btn">
								<image src="https://fgxfile.fagexin.online/fgx/1739783530541644.png"
									style="width:100%;height:100%;pointer-events: none;" mode="aspectFill"></image>
							</view>
						</view>
						<image v-else @tap.stop="choose_image(i)" style="width: 224rpx;height: 224rpx;" mode="aspectFill" :src="item"></image>
					</view>
				</view>


			</view>
			<view class="oprate pr-30">
				<view class="oprate-box">
					<view>

					</view>
					<view class="image-box" @tap.stop="changezan">
						<image mode="aspectFill" :src="zanUrl"></image>
					</view>
					<view class="image-box" style="" @tap.stop="openInput(info,1)">
						<image mode="aspectFill" src="../../static/friend/comment.png"></image>
					</view>
					<!-- <view class="image-box">
						<image src="../../static/friend/share.png"></image>
					</view> -->
				</view>
			</view>
			<view class="pr-30">
				<view class="flex dianzan mt-20" v-if="info.likeNames">
					<!-- <uni-icons custom-prefix="custom-icon" type="hand-up-filled" size="22" class="mr-10"></uni-icons> -->
					<view v-for="(item, index) in info.likeNames" :key="index" class="mr-8 color-999999 fs-24"
						style="line-height: 46rpx;">
						{{
				index === 0 ? item : "、" + item
			  }}
					</view>
					<view class="color-999999 fs-24" style="line-height: 46rpx;">觉得很赞</view>
				</view>
				<!-- 评论区 -->
				<view class="comment fs-30 black mt-10" v-if="info.commentDtos && !isDetail">
					<view class="comment-box flex flex-x-start flex-y-c pt-10" v-for="item in info.commentDtos"
						:key="item.id">
						<view class="user fs-24 mr-10">{{ item.userName + ":" }}</view>
						<view class="comment-content flex-1 fs-24" v-if="item.type === 1">{{ item.content }}</view>
						<view class="comment-content flex-1 fs-24" v-if="item.type === 2">
							<text>回复</text><text
								class="mr-10">{{ item.toName + ':' }}</text>{{ item.content }}<text></text>
						</view>
					</view>
				</view>
				<!-- 评论区 -->
				<!-- 信友圈评论区 -->
				<view class="detail-comment" v-if="info.commentDtos && isDetail">
					<view class="pt-10" style="margin-top:40rpx;" v-for="item in info.commentDtos" :key="item.id">
						<view class="flex">
							<view class="mr-20" @tap.stop="toPage(`/pages/chat/user-info?id=${item.userId}`)">
								<image :src="item.avatarUrl"
									style="width:70rpx;height:70rpx;border-radius:50%;background:#999;"></image>
							</view>
							<view class="flex-1" @tap.stop="openInput(item, 2)" @longpress="onDeleteComment(item)">
								<view class="name fs-26 flex flex-x-b flex-y-center" style="color:#333333;"
									@tap.stop="toPage(`/pages/chat/user-info?id=${item.userId}`)">
									<text> {{ item.userName }}</text>
									<text class="color-999999">{{ item.createTime }}</text>
								</view>
								<view class="content fs-26" style="color:#666666;" v-if="item.type === 1">
									{{ item.content }}
								</view>
								<view class="content fs-26 mt10" style="color:#666666;" v-if="item.type === 2">
									<text class="fs-26">回复</text><text style="color:#333333;"
										class="mr-10 fs-26">{{ item.toName }}</text><text
										class="fs-26">{{ item.content }}</text>
								</view>
								<!-- <view class="fs-20 mt-10" style="color:#999999;">
									<text style="margin-right:50rpx;">{{ item.createTime }}</text>
									<text class="mr-20" >回复</text>
									<text v-if="item.isDelete" @tap.stop="onDeleteComment(item)">删除</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<toast ref="deleteRef"></toast>
		<!-- 信友圈评论区 -->
		<!-- <qq-input ref="qqinput"></qq-input> -->
		<qq-bottom-input ref="qqinput"></qq-bottom-input>
	</view>
</template>

<script>
	import avater from "../../components/avater/avater.vue";
	import api from './api/friendCircle'
	export default {
		components: {
			avater
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			showDel: {
				type: Boolean,
				default: false
			},
			isDetail: {
				type: Boolean,
				default: false
			},
			showMore: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				isEdit: false,
				isplayVideo: false,
				// style: "width:300rpx;height:300rpx;border-radius:15rpx;",
				zanurls: [
					"../../static/friend/zan.png",
					"../../static/friend/zan-active.png",
				],
			};
		},
		computed: {
			zanUrl() {
				return this.zanurls[+this.info.isLike]
			}
		},
		onLoad() {},
		methods: {
			preview_video(item) {
				console.log('item', item)
				this.toPage('/pages/vedioPlay/index?url=' + JSON.stringify(item), '', false)
			},
			toDetil() {
				// if (!this.isEdit && !this.isDetail) {
				if (!this.isDetail) {
					this.toPage('/pages/friend/detail?id=' + this.info.id);
				}

				// }

			},
			// 删除评论
			async onDeleteComment(item) {
				if (!item.isDelete) return;
				this.isEdit = true
				const config = {
					desc: '确认删除该条评论吗？',
					success: async () => {
						const {
							status
						} = await api.deleteFriendCircleComment({
							id: item.id
						})
						this.isEdit = false
						if (status == 200) {
							this.showToast('删除成功')
							this.$emit('refresh', {
								id: this.info.id
							})
						}
					},
					fail: () => {
						this.isEdit = false
					}
				}
				this.$refs.deleteRef.open(config)
			},
			openInput(obj, type) {
				this.isEdit = true
				const hasReply = type === 2 || false
				const title = ['评论', `回复${obj.userName}`][+hasReply]
				this.$refs.qqinput.open({
					title: title,
					text: '',
					success: (content) => {
						if (!content) return this.showToast('请填写内容')
						const info = {
							friendCircleId: this.info.id,
							type,
							content: content.toString().trim(),

						}
						if (hasReply) {
							info.toId = obj.userId
							info.toCommentId = obj.id
							
						}
						api.addFriendCircleComment(info).then(res => {
							if (res.status === 200) {
								this.showToast('评论成功！')
								this.$emit('refresh', {
									id: this.info.id
								})
								this.isEdit = false
							}
						})
					},
					fail: (text) => {
						setTimeout(() => {
							this.isEdit = false
						}, 1000)

					}
				});
			},
			// 删除朋友圈
			async onDelete() {
				this.isEdit = true
				const config = {
					desc: '确认删除该条朋友圈？',
					success: async () => {
						const {
							status
						} = await api.deleteFriendCircle({
							id: this.info.id
						})
						if (status === 200) {
							this.showToast('删除成功！')
							// this.$emit('refresh') //刷新列表
							this.$emit('init', {
								id: this.info.id
							})
							this.isEdit = true
						}
					},
					fail() {
						setTimeout(() => {
							this.isEdit = false
						}, 1000)
					}
				}
				this.$refs.deleteRef.open(config)
			},
			// 点赞
			async changezan() {
				// this.zanstatus = !this.zanstatus;
				const {
					status
				} = await api.FriendCircleLike({
					id: this.info.id
				})
				if (status === 200) {
					// this.showToast('点赞成功')
					this.$emit('refresh', {
						id: this.info.id
					})
				}
			},
			ismargin(i) {
				return i % 3 === 0;
			},
			choose_image(i) {
				uni.previewImage({
					urls: this.info.images,
					current: i
				});
			},
			showMoreTask() {
				uni.showActionSheet({
					itemList: ['不看此类作品'],
					success: (e) => {
						if (e.tapIndex == 0) {
							this.showToast('你已选择不看此类作品');
							this.$emit('delteOne', this.info.id);
						}
						if (e.tapIndex == 1) {
							this.showToast('投诉成功，等待后台审核');
						}
					}
				})
			},
		},
	};
</script>

<style lang="scss">
	.video-box {
		width: 230rpx;
		height: 230rpx;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.play-btn {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.uni-video-containe {
		border: 3px solid red;
	}

	.pannel {
		background-color: #fff;
		padding: 30rpx;
		padding-right: 0rpx;
		padding-left: 0;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}

		.oprate {
			display: flex;
			justify-content: flex-end;
			width: 100%;

			.oprate-box {
				display: flex;
				width: 250rpx;
				justify-content: flex-end;
				align-items: center;

				.image-box {
					width: 46rpx;
					height: 46rpx;
					margin-left: 34rpx;
				}
			}
		}

		.black {
			color: #4d4d4d;
		}

		.imagebox {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.image-box {
				// width: 224rpx;
				// height: 224rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}
		}
	}
</style>